import React, { Component } from "react";
// import axios from 'axios'
import PubSub from 'pubsub-js'
import { Input, Button } from 'antd';

export default class Search extends Component {

    handleEnter = async () => {
        // 获取用户的输入值
        // 结构赋值连续写法 + 重命名
        const { input: { value: keyWord } } = this.keyWordElement
        PubSub.publish('startAxios', { isFirst: false, isLoading: true })

        //#region  使用fetch发送请求 -- 没有优化
        //  fetch(`https://api.github.com/search/users?q=${keyWord}`).then(
        //     response => {
        //         console.log('联系服务器成功了')
        //         return response.json()
        //     },
        //     error => {
        //         console.log('联系服务器失败了')
        //         return new Promise(() => {
        //             PubSub.publish('axios.error', {isLoading: false, err: error.message})
        //         })
        //     }
        // ).then(
        //     response => {
        //         console.log('获取数据成功了', response)
        //         if (response.errors) {
        //             PubSub.publish('axios.error', {isLoading: false, err: response.message})
        //         } else {
        //             PubSub.publish('axios.success', {users: response.items, isLoading: false})
        //         }
        //     },
        //     error => {
        //         console.log('获取数据失败了')
        //         PubSub.publish('axios.error', {isLoading: false, err: error.message})
        //     }
        // )
        //#endregion

        //#region  使用fetch发送请求 -- catch优化
        // fetch(`https://api.github.com/search/users?q=${keyWord}`).then(
        //     response => {
        //         console.log('联系服务器成功了')
        //         return response.json()
        //     },
        // ).then(
        //     response => {
        //         console.log('获取数据成功了', response)
        //         if (response.errors) {
        //             PubSub.publish('axios.error', { isLoading: false, err: response.message })
        //         } else {
        //             PubSub.publish('axios.success', { users: response.items, isLoading: false })
        //         }
        //     }
        // ).catch(
        //         error => {
        //             PubSub.publish('axios.error', { isLoading: false, err: error.message })
        //         }
        //     )
        //#endregion

        // 使用fetch发送请求 -- await优化
        try {
            const response = await fetch(`https://api.github.com/search/users?q=${keyWord}`)
            const dataItem = await response.json()
            if (dataItem.errors) {
                PubSub.publish('axios.error', { isLoading: false, err: dataItem.message })
            } else {
                PubSub.publish('axios.success', { users: dataItem.items, isLoading: false,  err: '' })
            }
        } catch (error) {
            PubSub.publish('axios.error', { isLoading: false, err: error.message })
        }

        //#region 发送网络请求---使用axios发送
        /* axios.get(`https://api.github.com/search/users?q=${keyWord}`).then(
          response => {
            console.log('成功了', response.data)
            PubSub.publish('axios.success', {users: response.data.items, isLoading: false})
          },
          error => {
            console.log('失败了', error)
            PubSub.publish('axios.error', {isLoading: false, err: error.message})
        }
        ) */
        //#endregion 
    }

    render() {
        return (
            <div>
                <div>
                    <span>Search Github Users</span>
                </div>
                <div className="search">
                    <Input ref={c => this.keyWordElement = c} onPressEnter={this.handleEnter} placeholder="enter the name you searh" />
                    <Button onClick={this.handleEnter}>Search</Button>
                </div>
            </div>
        )
    }
}